<template>
  <div class="app-container">
    <el-tabs type="border-card" @tab-click="handleClick">
      <el-tab-pane label="应用数据统计">
        <div class="filter-container">
          <el-select
            v-model="listQuery.channelId"
            filterable
            clearable
            :filter-method="dataFilter"
            placeholder="选择渠道"
            style="width: 150px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          >
            <el-option
              v-for="item in options"
              :key="item.channelId"
              :label="item.channel_name"
              :value="item.channelId"
            />
          </el-select>
          <el-date-picker
            v-model="times"
            class="filter-item"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 250px;"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-download"
            :loading="applicationBtn"
            @click="handleExport"
          >
            导出
          </el-button>
        </div>
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="tableData"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="时间" min-width="110" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.registerDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="渠道名称" min-width="150" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.nickname }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="80" align="center">
            <template slot="header">
              <span>UV</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="用户唯一点击数"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.channelUv }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="80" align="center">
            <template slot="header">
              <span>注册转化率</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="注册数/UV"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.uvRate }}</span>
            </template>
          </el-table-column>
          <el-table-column width="100" align="center">
            <template slot="header">
              <span>注册数</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="注册人数"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <el-button @click="showFoldLine(row)" type="text">{{
                row.registerNum
              }}</el-button>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>完件数</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="完整填写表单的人数"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.complete }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>完件率</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="完整填写表单的人数/注册数"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.completeRate }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>进件数</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="发送表单的数量"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.incomingPartsNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="110" align="center">
            <template slot="header">
              <span>进件率</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="进件数/完件数"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.incomingPartsRate }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="120" align="center">
            <template slot="header">
              <span>推送成功进件率</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="发送成功的数量/发送的总数量"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.incomingSuccessRate }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>登录数</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="当天注册的登录人数"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.loginUser }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>登录率</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="当天注册的登录人数/注册人数"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.loginRate }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>总点击</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="在该渠道中用户点击贷超的次数"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.clickNum }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>新用户点击</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="当天注册的用户在渠道中点击贷超的数"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.newcomerClickNum }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>注册点击比</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="点击数/注册数"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.clickRate }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>IOS占比</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="注册时使用IOS的人数/注册总人数"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.iosRate }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.current"
          :limit.sync="listQuery.size"
          @pagination="statisticalSep"
        />

        <el-dialog
          title="注册明细"
          width="1000px"
          :show-close="true"
          :close-on-click-modal="false"
          :visible.sync="dialogVisible"
        >
          <div class="filter-container">
            <el-date-picker
              v-model="times3"
              class="filter-item"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              style="width: 400px;"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
            <el-button
              v-waves
              class="filter-item"
              type="primary"
              icon="el-icon-search"
              @click="handleFilterFold"
              :loading="detailLoading"
            >
              搜索
            </el-button>
          </div>
          <foldLine
            :id="newAppCount"
            :class="newAppCount"
            :foldXData="foldXData"
            :foldYData="foldYData"
            height="500px"
            width="1000px"
          />
        </el-dialog>
      </el-tab-pane>
      <!-- <el-tab-pane label="API助贷数据统计">
        <div class="filter-container">
          <el-select
            v-model="listQuery.channelId"
            filterable
            :filter-method="dataFilter"
            placeholder="选择渠道"
            style="width: 150px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          >
            <el-option v-for="item in options" :key="item.channelId" :label="item.channel_name" :value="item.channelId" />
          </el-select>
          <el-date-picker
            v-model="times"
            class="filter-item"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 250px;"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
          <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
            搜索
          </el-button>
          <el-button v-waves class="filter-item" type="primary" icon="el-icon-download" @click="handleExport">
            导出
          </el-button>
        </div>
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="tableData"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="时间" min-width="110" align="center">
            <template slot-scope="{row}">
              <span>{{ row.registerDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="渠道名称" min-width="150" align="center">
            <template slot-scope="{row}">
              <span>{{ row.nickname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="准入" min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.passesNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="小赢注册" min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.winRegisterNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="授信提交" min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.winFormCommitNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="授信成功" min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.winFormSuccessNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="授信成功率" min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.winFormRate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="要款数" min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.winChargeNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="放款数" min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.winLoanNum }}</span>
            </template>
          </el-table-column>
          <el-table-column label="放款成功率" min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.winLoanRate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="放款金额" min-width="100" align="center">
            <template slot-scope="{row}">
              <span>{{ row.winLoanAmount }}</span>
            </template>
          </el-table-column>

        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="listQuery.current"
          :limit.sync="listQuery.size"
          @pagination="certInfo"
        />
      </el-tab-pane> -->

      <el-tab-pane label="助贷明细统计">
        <div class="filter-container">
          <el-select
            v-model="listQuery1.state"
            clearable
            placeholder="状态"
            style="width: 150px;"
            class="filter-item"
          >
            <el-option :value="0" label="开启">开启</el-option>
            <el-option value="" label="全部">全部</el-option>
          </el-select>
          <el-input
            v-model="listQuery1.city"
            placeholder="城市名称"
            style="width: 100px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-input
            v-model="listQuery1.channel"
            placeholder="机构名称"
            style="width: 100px;"
            class="filter-item"
            @keyup.enter.native="handleFilter"
          />
          <el-date-picker
            v-model="times1"
            class="filter-item"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 400px;"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-download"
            :loading="LoanBtn"
            @click="handleExport"
          >
            导出
          </el-button>
        </div>
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="tableData3"
          border
          fit
          highlight-current-row
          style="width: 100%;margin-bottom:50px"
        >
          <el-table-column label="开始日期" min-width="110" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.beginDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="结束日期" min-width="150" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.endDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="机构名称" min-width="80" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.channel }}</span>
            </template>
          </el-table-column>
          <el-table-column label="城市" min-width="80" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.city }}</span>
            </template>
          </el-table-column>
          <el-table-column label="总进件成功数" width="100" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.sumSuccess }}</span>
            </template>
          </el-table-column>
          <el-table-column label="总结算金额" min-width="100" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.sumMoney }}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="tableData1"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="日期" min-width="110" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.date }}</span>
            </template>
          </el-table-column>
          <el-table-column label="机构名称" min-width="150" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.channel }}</span>
            </template>
          </el-table-column>
          <el-table-column label="城市" min-width="80" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.city }}</span>
            </template>
          </el-table-column>
          <el-table-column label="单价" min-width="80" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.price }}</span>
            </template>
          </el-table-column>
          <el-table-column label="进件成功数" width="100" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.successNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="各城市结算金额"
            min-width="100"
            align="center"
          >
            <template slot-scope="{ row }">
              <span>{{ row.sumPrice }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery1.current"
          :limit.sync="listQuery1.size"
          @pagination="loanCount"
        />
      </el-tab-pane>
      <el-tab-pane label="渠道数据列表">
        <div class="filter-container">
          <el-select
            v-model="listQuery2.state"
            clearable
            placeholder="状态"
            style="width: 150px;"
            class="filter-item"
          >
            <el-option :value="1" label="开启">开启</el-option>
            <el-option :value="0" label="全部">全部</el-option>
          </el-select>
          <el-date-picker
            v-model="times2"
            class="filter-item"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width: 250px;"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
          <el-button
            v-waves
            class="filter-item"
            type="primary"
            icon="el-icon-download"
            :loading="channelBtn"
            @click="handleExport"
          >
            导出
          </el-button>
        </div>
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="tableData2"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="日期" min-width="110" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.registerDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="渠道名称" min-width="150" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.nickname }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="80" align="center">
            <template slot="header">
              <span>UV数量</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="用户在该渠道的唯一点击数"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.channelUv }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="80" align="center">
            <template slot="header">
              <span>注册数量</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="用户在该渠道的注册数量"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.registerNum }}</span>
            </template>
          </el-table-column>
          <el-table-column width="100" align="center">
            <template slot="header">
              <span>表单数量</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="用户在该渠道提交表单的数量"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.fromCount }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>进件成功数量</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="该渠道表单进件成功的数量"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.incomingPartsNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column label="表单进件率" min-width="100" align="center">
            <template slot="header">
              <span>表单进件率</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="进件成功数/表单总数"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.formSuccessRate }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>匹配机构数</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="能匹配到机构的数量"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.matchInstitutions }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>登录数量</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="注册后登录APP的数量"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.loginUser }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>登录率</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="登录数量/注册数量"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.loginRate }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>完件登录数量</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="提交表单并登录的数量"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.finishNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>完件登录率</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="提交表单并登录的数量/提交表单的数量"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.finishNumberProbability }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="100" align="center">
            <template slot="header">
              <span>结算金额</span>
              <el-popover
                placement="top"
                width="200"
                trigger="hover"
                content="表单成功数*该机构单价"
              >
                <i class="el-icon-info" slot="reference"></i>
              </el-popover>
            </template>
            <template slot-scope="{ row }">
              <span>{{ row.amount }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery2.current"
          :limit.sync="listQuery2.size"
          @pagination="channelData"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  statisticalSep,
  channelDailyReport,
  certInfo,
  exportCertInfo,
  exportStatisticalSep,
  loanAssis,
  exportLoanAssis,
  loanCount,
  channelData,
  sumloanCount,
  getRegSumByChannel
} from '@/api/channel';
import { getChannelIdAndNick } from '@/api/user';
import { timestampToTime } from '@/utils/index';
import waves from '@/directive/waves'; // waves directive
import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
import FoldLine from '@/components/Charts/FoldLine';
export default {
  name: 'CountChannel',
  components: { Pagination, FoldLine },
  directives: { waves },
  filters: {
    number(value) {
      return parseFloat(value).toFixed(2);
    },
    dateFormat(value) {
      if (value !== null && value !== '') {
        return value.split(' ')[0];
      } else {
        return '';
      }
    }
  },
  data() {
    return {
      tableData: [],
      tableData1: [],
      tableData2: [],
      dayData: [],
      total: 0,
      daytotal: 0,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 50
        // channelId: -1,
        // endTime: '2021-07-20',
        // startTime: '2021-07-08'
      },
      listQuery1: {
        current: 1,
        size: 10,
        leadingOut: 0,
        state: '',
        city: '',
        channel: ''
        // channelId: -1,
        // endTime: '2021-07-20',
        // startTime: '2021-07-08'
      },
      listQuery2: {
        current: 1,
        size: 10,
        leadingOut: 0,
        state: 1
      },
      listQuery3: {
        channelId: '',
        endDate: '',
        startDate: ''
      },
      foldXData: [],
      foldYData: [],
      times3: [],
      times: [],
      times1: [],
      times2: [],
      timeNow: [
        new Date(new Date().toLocaleDateString()).getTime(),
        new Date(new Date().toLocaleDateString()).getTime() +
          (24 * 60 * 60 * 1000 - 1)
      ],
      daytimes: {
        startTime: ['', ''],
        endTime: '',
        current: 1,
        size: 30
      },
      dayId: 0,
      countChannelUsersNum: 0,
      countUvNum: 0,
      daydialogFormVisible: false,
      dialogPvVisible: false,
      dialogVisible: false,
      optionsCopy: [],
      options: [],
      tabActive: '0',
      listLoading: false,
      tableData3: [],
      applicationBtn: false,
      LoanBtn: false,
      channelBtn: false
    };
  },
  created() {
    this.statisticalSep();
    this.getChannelIdAndNick();
    this.defaultDate();
  },
  methods: {
    handleFilterFold() {
      if (this.times3) {
        this.listQuery3.endDate = this.times3[1];
        this.listQuery3.startDate = this.times3[0];
      } else {
        this.times3 = [
          timestampToTime(this.timeNow[0]),
          timestampToTime(this.timeNow[1])
        ];
        this.listQuery3.endDate = this.times3[1];
        this.listQuery3.startDate = this.times3[0];
      }
      this.getRegSum();
    },
    showFoldLine(row) {
      this.listQuery3.channelId = row.channelId;
      const time1 = new Date(row.registerDate).getTime() - 8 * 60 * 60 * 1000;
      const time2 = time1 + (24 * 60 * 60 * 1000 - 1);
      this.times3 = [timestampToTime(time1), timestampToTime(time2)];
      this.listQuery3.endDate = this.times3[1];
      this.listQuery3.startDate = this.times3[0];
      this.dialogVisible = true;
      this.getRegSum();
    },
    defaultDate() {
      let date = new Date();
      //获取当前时间的年份转为字符串
      let year = date.getFullYear().toString();
      //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
      let month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1).toString()
          : (date.getMonth() + 1).toString();
      //获取天，判断是否小于10，如果是在字符串前面拼接'0'
      let da =
        date.getDate() < 10
          ? '0' + date.getDate().toString()
          : date.getDate().toString();
      //字符串拼接，开始时间，结束时间
      let end = year + '-' + month + '-' + da + ' ' + '23:59:59'; //当天
      let beg = year + '-' + month + '-' + da + ' ' + '00:00:00';
      this.times1 = [beg, end]; //将值设置给插件绑定的数据
      this.listQuery1.startTime = end;
      this.listQuery1.endTime = beg;
      this.times2 = [beg, end]; //将值设置给插件绑定的数据
      this.listQuery2.startTime = end;
      this.listQuery2.endTime = beg;
    },
    handleClick(tab) {
      this.tabActive = tab.index;
      this.handleFilter();
    },
    handleExport() {
      if (this.tabActive === '0') {
        this.applicationBtn = true;
        this.exportStatisticalSep();
      }
      //  else if (this.tabActive === '1') {
      //   this.exportCertInfo()
      // }
      else if (this.tabActive == '1') {
        this.LoanBtn = true;
        this.exportloanCount();
      } else if (this.tabActive == '2') {
        this.channelBtn = true;
        this.exportchannelData();
      }
    },
    exportchannelData() {
      this.listQuery2.leadingOut = 1;
      channelData(this.listQuery2).then(res => {
        if (res.data.code === 200) {
          this.channelBtn = false;
          window.location.href = res.data.data.data;
        } else {
          this.channelBtn = false;
          this.$notify({
            title: '错误',
            message: '导出失败，请联系后台技术人员',
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    exportloanCount() {
      this.listQuery1.leadingOut = 1;
      loanCount(this.listQuery1).then(res => {
        if (res.data.code === 200) {
          this.LoanBtn = false;
          window.location.href = res.data.data.data;
        } else {
          this.LoanBtn = false;
          this.$notify({
            title: '错误',
            message: '导出失败，请联系后台技术人员',
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    exportStatisticalSep() {
      exportStatisticalSep(this.listQuery).then(res => {
        if (res.data.code === 200) {
          this.applicationBtn = false;
          window.location.href = res.data.data;
        } else {
          this.applicationBtn = false;
          this.$notify({
            title: '错误',
            message: '导出失败，请联系后台技术人员',
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    exportCertInfo() {
      exportCertInfo(this.listQuery).then(res => {
        if (res.data.code === 200) {
          window.location.href = res.data.data;
        } else {
          this.$notify({
            title: '错误',
            message: '导出失败，请联系后台技术人员',
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    exportLoanAssis() {
      exportLoanAssis(this.listQuery).then(res => {
        if (res.data.code === 200) {
          window.location.href = res.data.data;
        } else {
          this.$notify({
            title: '错误',
            message: '导出失败，请联系后台技术人员',
            type: 'fail',
            duration: 2000
          });
        }
      });
    },
    // 渠道下拉
    dataFilter(val) {
      this.value = val;
      if (val) {
        // val存在
        this.options = this.optionsCopy.filter(item => {
          console.log(item);
          if (
            !!~item.channel_name.indexOf(val) ||
            !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        // val为空时，还原数组
        this.options = this.optionsCopy;
      }
    },
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery);
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.optionsCopy.push(element);
          this.options.push(element);
        }
      });
    },
    // 获取列表
    async statisticalSep() {
      const res = await statisticalSep(this.listQuery);
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    // 助贷明细统计列表
    async loanCount() {
      this.listQuery1.leadingOut = 0;
      this.tableData3 = [];
      const res = await loanCount(this.listQuery1);
      const res1 = await sumloanCount(this.listQuery1);
      this.tableData3.push(res1.data.data);
      this.tableData1 = res.data.data.records;
      console.log(this.tableData3);
      this.total = res.data.data.total;
    },
    // 渠道数据列表
    async channelData() {
      this.listQuery2.leadingOut = 0;
      const res = await channelData(this.listQuery2);
      this.tableData2 = res.data.data.records;
      console.log(this.tableData2);
      this.total = res.data.data.total;
    },
    async certInfo() {
      const res = await certInfo(this.listQuery);
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    async loanAssis() {
      const res = await loanAssis(this.listQuery);
      this.tableData = res.data.data.records;
      this.total = res.data.data.total;
    },
    // 搜索
    handleFilter() {
      this.listQuery.current = 1;
      this.listQuery.deviceVersion = this.listQuery.device_version;
      // this.listQuery.channelName = this.listQuery.nickname
      this.listQuery.deviceId = this.listQuery.device_id;

      if (this.times == null) {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
      } else if (this.times.length === 0) {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
      } else {
        this.listQuery.endTime = this.times[1];
        this.listQuery.startTime = this.times[0];
      }
      if (this.times1 == null) {
        this.listQuery1.endTime = '';
        this.listQuery1.startTime = '';
      } else if (this.times1.length === 0) {
        this.listQuery1.endTime = '';
        this.listQuery1.startTime = '';
      } else {
        this.listQuery1.endTime = this.times1[1];
        this.listQuery1.startTime = this.times1[0];
      }
      if (this.times2 == null) {
        this.listQuery2.endTime = '';
        this.listQuery2.startTime = '';
      } else if (this.times2.length === 0) {
        this.listQuery2.endTime = '';
        this.listQuery2.startTime = '';
      } else {
        this.listQuery2.endTime = this.times2[1];
        this.listQuery2.startTime = this.times2[0];
      }
      if (this.tabActive === '0') {
        this.statisticalSep(this.listQuery);
        // } else if (this.tabActive === '1') {
        //   this.certInfo(this.listQuery)
      } else if (this.tabActive === '1') {
        this.loanCount(this.listQuery1);
      } else if (this.tabActive == '2') {
        this.channelData(this.listQuery2);
      }
    },
    // 查看日统计
    async seeDayCount(id) {
      this.dayData = [];
      this.dayId = id;
      this.daydialogFormVisible = true;
      const res = await channelDailyReport({
        channelId: this.dayId,
        startTime: this.daytimes.startTime[0],
        endTime: this.daytimes.startTime[1],
        current: this.daytimes.current,
        size: this.daytimes.size
      });

      if (res.data.code === 200) {
        this.dayData = res.data.data.records;
        this.dayData.forEach(element => {
          if (element.channelUvCount === 0) {
            element.cdRate = '0.00%';
          } else {
            element.cdRate =
              parseFloat(
                (element.userDeviceCount / element.channelUvCount) * 100
              ).toFixed(2) + '%';
          }
          if (element.userDeviceCount === 0) {
            element.udRate = '0.00%';
          } else {
            element.udRate =
              parseFloat(
                (element.userRegCount / element.userDeviceCount) * 100
              ).toFixed(2) + '%';
          }
          if (element.userRegCount === 0) {
            element.vdRate = '0.00%';
          } else {
            element.vdRate =
              parseFloat(
                (element.userVipCount / element.userRegCount) * 100
              ).toFixed(2) + '%';
          }
        });
        this.daytotal = res.data.data.total;
        console.log(this.daytotal);
      } else {
        this.$notify({
          title: 'Fail',
          message: res.data.msg,
          type: 'fail',
          duration: 2000
        });
      }
    },
    // 注册明细
    async getRegSum() {
      try {
        const res = await getRegSumByChannel(this.listQuery3);
        if (res.data.code === 200) {
          this.foldXData = res.data.data.evertday;
          this.foldYData = res.data.data.orderNum;
        }
      } catch (error) {
        console.log(error);
      }
    },
    async handleFilterDay() {
      if (this.daytimes.startTime === null) {
        this.daytimes.startTime = '';
      }
      if (this.daytimes.endTime === null) {
        this.daytimes.endTime = '';
      }
      const res = await channelDailyReport({
        channelId: this.dayId,
        startTime: this.daytimes.startTime[0],
        endTime: this.daytimes.startTime[1],
        current: this.daytimes.current,
        size: this.daytimes.size
      });
      if (res.data.code === 200) {
        this.dayData = res.data.data.records;
        this.daytotal = res.data.data.total;
        this.dayData.forEach(element => {
          if (element.channelUvCount === 0) {
            element.cdRate = '0.00%';
          } else {
            element.cdRate =
              parseFloat(
                (element.userDeviceCount / element.channelUvCount) * 100
              ).toFixed(2) + '%';
          }
          if (element.userDeviceCount === 0) {
            element.udRate = '0.00%';
          } else {
            element.udRate =
              parseFloat(
                (element.userRegCount / element.userDeviceCount) * 100
              ).toFixed(2) + '%';
          }
          if (element.userRegCount === 0) {
            element.vdRate = '0.00%';
          } else {
            element.vdRate =
              parseFloat(
                (element.userVipCount / element.userRegCount) * 100
              ).toFixed(2) + '%';
          }
        });
      } else {
        this.$notify({
          title: 'Fail',
          message: res.data.msg,
          type: 'fail',
          duration: 2000
        });
      }
    }
  }
};
</script>

<style scoped>
.cap {
  opacity: 0.5;
}
</style>
s
